<template>
    <n-radio-group v-bind="props">
        <template v-if="type === 'button'">
            <n-radio-button
                v-for="item in options"
                :key="<PropertyKey>item.value"
                :value="item.value"
            >
                {{ item.label }}
            </n-radio-button>
        </template>

        <n-space v-else>
            <n-radio
                v-for="item in options"
                :key="<PropertyKey>item.value"
                :value="item.value"
            >
                {{ item.label }}
            </n-radio>
        </n-space>
    </n-radio-group>
</template>

<script setup lang="ts">
import { RadioProps } from 'naive-ui'

export type RadioGroupProps = {
    options: RadioProps[]
    type?: 'button'
    disabled?: boolean // false	禁用状态
    name?: string // undefined	选项组内部 radio 元素的 name 属性
    size?: 'small' | 'medium' | 'large' // 'medium' 大小
    value?: string | number | boolean | null // null	 选中的值
    'default-value'?: string | number | boolean | null // null	默认选中的值
    'on-update:value'?: (value: string | number | boolean) => void // undefined	发生变化时触发的回调方法
}

const props = defineProps<RadioGroupProps>()
</script>
